<template>
  <div class="card-list" :class="{'top-bg': item.ranking < 4}">
    <h5 :class="{'one-line-ellipsis': item.ranking > 3, 'two-line-ellipsis': item.ranking < 4}">第{{item.ranking}}名 :{{item.title}}</h5>
    <h6 class="two-line-ellipsis">{{item.gongsi}}({{item.title}})</h6>
    <div class="introduce" ref="introduce" :class="{'six-line-ellipsis': retractFlag}">
      <p class="clearfix">
        <img :src="item.thumb" alt="">
        <span v-if="item.profile">{{item.profile}}</span>
        <span class="no-profile" v-else>小编正在疯狂更新敬请期待...</span>
      </p>
    </div>
    <button class="btn see-btn" @click="showMore" v-show="btnFlag">{{retractFlag | btnFliter}} <span :class="{'retract': !retractFlag}">></span> </button>
    <div class="information">
      <p>{{item.gongsi}}</p>
      <p>{{item.homepage}}</p>
      <p>{{item.dizhi}}</p>
    </div>
    <div class="rank-box">
      <span>NO.{{item.ranking}}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object
    }
  },
  data() {
    return {
      btnFlag: false,
      retractFlag: false // 是否显示查看详情
    }
  },
  mounted() {
    // 判断公司描述是否超过6行，超过则显示查看详情按钮
    this.$nextTick(() => {
      let content = this.$refs.introduce
      let finalStyle = content.currentStyle ? content.currentStyle : document.defaultView.getComputedStyle(content, null)
      // 一行的高度
      let aLine = finalStyle.lineHeight
      // 一行的高度值去px
      let aLineHeight = aLine.substring(0, aLine.length - 2)
      // 描述的总高度
      let contentHeight = content.offsetHeight
      if (parseInt(contentHeight / aLineHeight) > 6) {
        // 显示查看详情
        this.retractFlag = true
        this.btnFlag = true
      }
    })
  },
  methods: {
    showMore() {
      this.retractFlag = !this.retractFlag
    }
  },
  filters: {
    btnFliter(v) {
      if (v) {
        return '点击查看更多详情'
      } else {
        return '点击收起'
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.top-bg {
  background: linear-gradient(
    0deg,
    rgba(237, 225, 204, 1),
    rgba(255, 251, 242, 1)
  ) !important;
  box-shadow: 0.08rem 0.08rem 0.16rem #dddfe1;
}
.card-list {
  width: 6.94rem;
  margin: 0.4rem auto 0;
  padding: 0.4rem 0.7rem 0.5rem;
  border-radius: 0.12rem;
  background: #ffffff;
  position: relative;
  h5 {
    font-size: 0.36rem;
    color: rgba(148, 97, 23, 1);
    text-align: center;
    padding: 0 0.5rem;
    margin-bottom: 0.36rem;
  }
  h6 {
    font-size: 0.32rem;
    line-height: 0.46rem;
    color: rgba(68, 68, 68, 1);
    margin: 0.1rem 0 0.16rem;
  }
  .introduce {
    padding-top: 0.2rem;
    border-top: 1px solid rgba(148, 97, 23, 0.3);
    font-size: 0.26rem;
    line-height: 0.42rem;
    color: rgba(51, 51, 51, 1);
    .no-profile {
      font-size: 0.22rem;
      line-height: 1.1rem;
      color: rgba(182, 181, 181, 1);
    }
    img {
      width: 1.94rem;
      height: 1.1rem;
      object-fit: contain;
      text-align: center;
      margin-right: 0.14rem;
      float: left;
    }
  }
  .see-btn {
    font-size: 0.24rem;
    line-height: 0.38rem;
    color: rgba(255, 174, 56, 1);
    margin-top: 0.46rem;
    .retract {
      display: inline-block;
      transform: rotate(-90deg);
    }
  }
  .information {
    padding-top: 0.46rem;
    p {
      font-size: 0.24rem;
      color: rgba(51, 51, 51, 1);
      line-height: 0.38rem;
    }
  }
  .rank-box {
    width: 1.11rem;
    height: 0.89rem;
    background: url("../assets/rank-icon.png") center no-repeat;
    background-size: cover;
    font-size: 0.28rem;
    line-height: 0.89rem;
    font-weight: bold;
    color: rgba(255, 228, 0, 1);
    position: absolute;
    top: -0.08rem;
    left: 0.24rem;
    span {
      display: inline-block;
      width: 0.92rem;
      text-align: center;
    }
  }
}
</style>
